<!-- 
    侧边菜单栏
props
    父传子，传递isCollapse布尔类型
 -->
 <template>
    <div class="aside-meun">
        <el-scrollbar>
          <el-menu active-text-color="#ffd04b" :collapse="isCollapse" background-color="#304156"
            :default-active="$route.path" text-color="#fff" router>
            <!-- 渲染首页 使用slice进行截取0下标，并且进行渲染 -->
            <template v-for="(item,index) in menus.slice(0,1)" :key="index">
              <el-menu-item :index="'/index/'+item.path">
                <el-icon>
                    <i :class="'iconfont '+item.meta.icon"></i>
                </el-icon>
                <span>{{$t(item.meta.title)}}</span>
              </el-menu-item>
            </template>
            <!-- 一层循环渲染 使用slice截取1下标和1下标之后的数组，并且进行渲染 -->
            <template v-for="(item,index) in menus.slice(1)" :key="index">
              <el-sub-menu :index="item.meta.icon">
                <template #title>
                  <el-icon>
                    <i :class="'iconfont '+item.meta.icon"></i>
                  </el-icon>
                  <span>{{$t(item.meta.title)}}</span>
                </template>
                <!-- 二层循环渲染 -->
                <template v-for="(items,indexs) in item.children?.filter(itema=>itema.name!='AddCommodi'&&itema.name!='EditCommodi')" :key="indexs">
                  <el-menu-item :index="'/index/' + item.path +'/'+ items.path">{{$t(items.meta.title)}}</el-menu-item>
                </template>
              </el-sub-menu>
            </template>
          </el-menu>
        </el-scrollbar>
    </div>
 </template>

 <script setup lang="ts">
// 渲染路由
import menus from "@/router/pages"
// 父传子，子接收
const props = defineProps({isCollapse:{ type:Boolean, required:false }})

 </script>

 <style lang="less" scoped>
    .aside-meun{
        width: 100%;
     // 组件滚动条样式
     .el-scrollbar {
        height: 100vh;
        // 菜单栏样式
        .el-menu {
          min-height: 100vh;
          border-right: none;
          // 侧边菜单栏开启为200px
          &:not(.el-menu--collapse) {
            width: 220px;
          }
        }
      }
    }
 </style>